{% extends "base.html" %}


{% block title %}Find Partners{% endblock %}
{% block crumb %}&rsaquo; Find Partners{% endblock %}

{% block extrahead %}
<script type="text/javascript" src="/static_media/js/heatmap.js"></script>

<script type="text/javascript">
function setupHeatmapInput() {
	var heatmap = document.getElementById("usageMap0");
	var context = heatmap.getContext("2d");
	
	heatmap.addEventListener("click", heatmapClick, false);
}

function getCursorPosition(e) {
	var heatmap = document.getElementById("usageMap0");
	
	var x;
	var y;
	if(e.pageX != undefined && e.pageY != undefined) {
		x = e.pageX;
		y = e.pageY;
	}
	else {
		x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	
	x -= heatmap.offsetLeft;
	y -= heatmap.offsetTop;
	
	return [x,y];
}

function heatmapClick(e) {
	var heatmap = document.getElementById("usageMap0");
	
	var cell = getCursorPosition(e);
	var x = cell[0];
	var y = cell[1];
	
	var topHeight = 30;
	var leftWidth = 30;
	
	var height = heatmap.height - topHeight;
	var width = heatmap.width - leftWidth;
	
	x -= leftWidth;
	y -= topHeight;
	
	//Return if we have an out-of-bounds click
	if(x < 0 || x >= width || y < 0 || y >= height) return;
	
	var dayWidth = width / 7;
	var hourHeight = height / 24;
	
	var thisDay = Math.floor(x / dayWidth);
	var thisHour = Math.floor(y / hourHeight);
	
	var thisIndex = (thisDay * 24) + thisHour;
	
	if(mapValues[thisIndex]) mapValues[thisIndex] = 0;
	else mapValues[thisIndex] = 1.0;
	
	drawMap(mapValues, compareValues, 0);
	
	var form = document.getElementById("searchForm");
	
	var hiddenField = document.createElement("input");
	hiddenField.setAttribute("type", "hidden");
	hiddenField.setAttribute("name", "selected");
	hiddenField.setAttribute("value", currentSelection);
	form.appendChild(hiddenField);
	
	for(var i = 0; i < mapValues.length; i++) {
		if(mapValues[i] > 0) {
			var hiddenField = document.createElement("input");
			hiddenField.setAttribute("type", "hidden");
			hiddenField.setAttribute("name", i);
			hiddenField.setAttribute("value", mapValues[i]);
			
			form.appendChild(hiddenField);
		}
	}
	
	form.submit();
}

function select(user) {
	currentSelection = user;
	
	var results = document.getElementsByName("result");
	for(var i = 0; i < results.length; i++) {
		results[i].className = "";
	}
	
	//Fill in the selection information on the right side
	var xmlhttp;
	if(window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	}
	else {
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp.onreadystatechange=function() {
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var mapData = JSON.parse(xmlhttp.responseText);
			
			{% if not form %}
				var mapValues = Array();
				for(var i = 0; i < mapData['user'].length; i++) {
					mapValues[mapData['user'][i]['hour']] = mapData['user'][i]['value'];
				}
			{% endif %}
			
			{% if not form %}
				var compareValues = Array();
			{% endif %}
			for(var i = 0; i < mapData['compare'].length; i++) {
				compareValues[mapData['compare'][i]['hour']] = mapData['compare'][i]['value'];
			}
			
			var resultDiv = document.getElementById("socialResult");
			var resultHeader = document.getElementById("resultHeader");
			if(!resultHeader) {
				resultHeader = document.createElement("h2");
				resultHeader.id = "resultHeader";
				resultDiv.insertBefore(resultHeader, resultDiv.firstChild);
			}
			var text = "Your Usage";
			{% if form %}
				text = "Your Search";
			{% endif %}
			resultHeader.innerHTML = "Comparing <span class='red'>" + text + "</span> with <span class='blue'>" + mapData['compareName'] + "</span>";
			
			drawMap(mapValues, compareValues, 0);
		}
	}
	
	xmlhttp.open("GET", "/social/heatmap/?user=" + user);
	xmlhttp.send();
}
</script>
{% endblock %}

{% block content %}
	<div class="checkinNav">
		{% for typeName, typeURL in types %}
			<a href="/social/{{typeURL}}" {% if type = typeURL %}class="selected"{% endif %}>{{typeName}}</a>
		{% endfor %}
	</div>

  <div id="socialResult">
  	<div class="heatMap">
		{% if form %}
			<script type="text/javascript">
				$(document).ready(function() {
					{% if selected == -1 %}
						drawMap(null, null, 0);
					{% endif %}
					mapValues = Array();
					compareValues = Array();
					currentSelection = {{selected}};
					setupHeatmapInput();
					
					{% if usageMap %}
						{% for hour,value in usageMap %}
							mapValues[{{hour}}] = {{value}};
						{% endfor %}
						drawMap(mapValues, null, 0);
					{% endif %}
					
					{% if selected != -1 and results %}
						select({{selected}});
					{% endif %}
				});
			</script>
			{% if selected == -1 %}
				<h2 id="resultHeader">Click on the map below to specify your search.</h2>
			{% else %}
				<h2 id="resultHeader">Comparing <span class='red'>Your Search</span> with <span class='blue'></span></h2>
			{% endif %}
		{% else %}
			<script type="text/javascript">
				$(document).ready(function() {
					drawMap(null, null, 0);
				});
			</script>
			<h2 id="resultHeader">Select a user in the list to the left to see their usage.</h2>
		{% endif %}
		
		<canvas id="usageMap0" width=600 height=450 />
		
		<form action="" method="post" id="searchForm">{% csrf_token %}</form>
	</div>
  </div>

  <h2>{% if form %}Search Results{% else %}People Like You{% endif %}</h2>
  <table class="socialSearch">
  	<thead>
      <tr>
          <th>Similarity</th>
          <th>Name</th>
          <th>Profile</th>
      </tr>
    </thead>
   	<tbody id="searchResults">
      {% for user in results %}
	      <tr name="result" onMouseOver="select({{user.id}});" onClick="window.location='/userprofile/view/{{user.id}}';">
	          <td class="similarityScore">{{user.score}}</td>
	          <td>{{user.name}}</td>
	          <td><a href="/userprofile/view/{{user.id}}">View Profile</a></td>
	      </tr>
      {% endfor %}
    </tbody>

  </table>
{% endblock %}